<template>
  <div class="upload-item">
    <div class="upload-top">
      <span>{{ name }}</span>
      <el-button size="small" type="success" @click="handleSure"
        >确定</el-button
      >
    </div>
    <div class="upload-con">
      <el-upload
        :action="url"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :headers="token"
        multiple
        :limit="fileLimit"
        :on-exceed="handleExceed"
        :file-list="fileList"
        accept=".pdf,.PDF"
        :on-success="handleSuccess"
      >
        <el-button size="small" type="primary">上传报告</el-button>
      </el-upload>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  props: {
    name: {
      type: String,
      default: "",
    },
    field: {
      type: String,
      default: "",
    },
    url: {
      type: String,
      default: "",
    },
  },
  watch: {
    url: {
      handler() {},
      immediate: true,
    },
  },
  data() {
    return {
      token: {
        accessToken: getToken(),
      },
      actions:
        process.env.VUE_APP_BASE_API + "/v1/plugins/met/testingReport/upload",
      fileLimit: 5,
      title: "",

      filesArray: [],
      reportItem: {},
      fileList: [],
      proofId: "",
    };
  },

  methods: {
    handleRemove(file, fileList) {
      this.handleUpload(fileList);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择${this.fileLimit}个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    handleSuccess(response, file, fileList) {
      this.handleUpload(fileList);
    },

    handleUpload(fileList) {
      this.filesArray = [];
      if (fileList.length > 0) {
        fileList.map((item) => {
          if (item.response && item.response.data) {
            this.filesArray.push(item.response.data);
          }
        });
      }

      let ids = this.filesArray.map((item) => item.fileId);
      let urls = this.filesArray.map((item) => item.fileUrl);

      this.reportItem = {
        check_item_field_name: this.field,
        file_ids: ids.join(","),
        file_urls: urls.join(","),
      };
    },

    handleSure() {
      this.$emit("handlePost", this.reportItem);
    },
  },
};
</script>


<style lang="scss" scoped>
.upload-main {
  width: 1000px;
  background: #fff;

  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.form {
  box-sizing: border-box;
  padding: 20px;
}

.upload-item {
  height: 250px;
  .upload-top {
    display: flex;
    height: 45px;
    font-weight: bold;
    align-items: center;
    justify-content: space-between;
    background: #f2f2f2;
    box-sizing: border-box;
    padding: 20px;
  }
  .upload-con {
    height: 200px;
      overflow-y: auto;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
}

.upload {
  display: flex;
  justify-content: center;
  > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>

